import { computed, watch } from 'vue'

export const useTitle = (uuid: string, store: any) => {
  const titleOptions = computed(() => {
    return {
      title: {
        text: store.widgetConfig[uuid].titleText,
        show: store.widgetConfig[uuid].showTitle,
        left: store.widgetConfig[uuid].titlePosition,
        textStyle: {
          color: store.widgetConfig[uuid].fontColor,
          fontSize: store.widgetConfig[uuid].fontSize,
          fontWeight: store.widgetConfig[uuid].fontStyle,
        }
      }
    }
  })
  return titleOptions
}
export const usexAxis = (uuid: string, store: any, data: any) => {
  const xAxisOptions = computed(() => {
    return {
      xAxis: {
        show: store.widgetConfig[uuid].showXAxis,
        type: 'category',
        axisLine: {
          lineStyle: {
            // 设置x轴颜色
            color: store.widgetConfig[uuid].axisLineColor
          }
        },
        // 设置X轴数据旋转倾斜
        axisLabel: {
          show: true,
          rotate: store.widgetConfig[uuid].axisLabelRotate, // 旋转角度
          interval: store.widgetConfig[uuid].axisLabelInterval,  //设置X轴数据间隔几个显示一个，为0表示都显示
          textStyle: {
            color: store.widgetConfig[uuid].axisLabelFontColor, // 坐标文字颜色
            fontSize: store.widgetConfig[uuid].axisLabelFontSize
          }
        },
        splitLine: {
          show: store.widgetConfig[uuid].xSplitLineShow,
          lineStyle: {
            color: store.widgetConfig[uuid].xSplitLineColor
          }
        },
        // boundaryGap值为false的时候，折线第一个点在y轴上
        data: data.value,
      },
    }
  })
  return xAxisOptions
}
export const useyAxis = (uuid: string, store: any) => {
  const yAxisOptions = computed(() => {
    return {
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            // 设置x轴颜色
            color: store.widgetConfig[uuid].yAxisLineColor
          }
        },
        textStyle: {
          fontSize: 12,//字体大小
          color: '#ffffff'//字体颜色
        },
        // 设置X轴数据旋转倾斜
        axisLabel: {
          rotate: store.widgetConfig[uuid].yAxisLabelRotate, // 旋转角度
          interval: store.widgetConfig[uuid].yAxisLabelInterval,  //设置X轴数据间隔几个显示一个，为0表示都显示
          textStyle: {
            color: store.widgetConfig[uuid].yAxisLabelFontColor, // 坐标文字颜色
            fontSize: store.widgetConfig[uuid].yAxisLabelFontSize
          }
        },
        splitLine: {
          show: store.widgetConfig[uuid].ySplitLineShow,
          lineStyle: {
            color: store.widgetConfig[uuid].ySplitLineColor
          }
        },
      },
    }
  })
  return yAxisOptions
}
export const useLegend = (uuid: string, store: any) => {
  const legendOption = computed(() => {
    const legendConfig: any = {
      legend: {
        textStyle: {
          fontSize: store.widgetConfig[uuid].legendFontSize,
          color: store.widgetConfig[uuid].legendFontColor
        },
        orient: store.widgetConfig[uuid].layoutMethod,
        x: store.widgetConfig[uuid].xLegendPosition,
        y: store.widgetConfig[uuid].yLegendPosition,
      },
    }
    legendConfig.legend.show = store.widgetConfig[uuid].showLegend;
    return legendConfig;
  })
  return legendOption
}


export const useGrid = (uuid: string, store: any) => {
  const options = computed(() => {
    const uint = store.widgetConfig[uuid].gridUint
    return {
      grid: {
        top: store.widgetConfig[uuid].gridTop + uint,
        left: store.widgetConfig[uuid].gridLeft + uint,
        right: store.widgetConfig[uuid].gridRight + uint,
        bottom: store.widgetConfig[uuid].gridBottom + uint,
        containLabel: true
      },
    }
  })
  return options
}

export const useLineStyle = (uuid: string, store: any) => {
  function getLineStyle(index: number) {
    const lineStyle: any = {
      seriesItem: true,
      smooth: store.widgetConfig[uuid].smooth,
      symbolSize: store.widgetConfig[uuid].lineItemStyleSize,   //设定实心点的大小
      itemStyle: {
        normal: {
          color: store.widgetConfig[uuid].lineItemStyleColor[index % store.widgetConfig[uuid].lineItemStyleColor.length],
          lineStyle: {
            color: store.widgetConfig[uuid].lineColor[index % store.widgetConfig[uuid].lineColor.length],
            width: store.widgetConfig[uuid].lineWidth,
          }
        }
      },
    }
    if (store.widgetConfig[uuid].lineAreaShow) {
      lineStyle['areaStyle'] = {
        color: store.widgetConfig[uuid].lineAreaStyleColor[index % store.widgetConfig[uuid].lineAreaStyleColor.length]
      }
    } else {
      lineStyle['areaStyle'] = {
        color: 'rgba(0,0,0,0)'
      }
    }
    return lineStyle;
  }
  const options = computed(() => {
    const lineStyleList: any[] = []
    store.widgetConfig[uuid].lineItemStyleColor.forEach((item: any, index: number) => {
      lineStyleList.push(getLineStyle(index))
    })
    return lineStyleList
  })
  return options
}

export const useBarStyle = (uuid: string, store: any) => {
  const options = computed(() => {
    return {
      seriesItem: true,
      itemStyle: {
        color: store.widgetConfig[uuid].barColor,
      }
    }
  })
  return options
}

export const usePieStyle = (uuid: string, store: any) => {
  const options = computed(() => {
    return {
      seriesItem: true,
      label: {
        show: store.widgetConfig[uuid].showLabel,
        color: store.widgetConfig[uuid].labelColor,
        fontSize: store.widgetConfig[uuid].labelFontSize,
      },
      radius: [store.widgetConfig[uuid].innerRadius + '%', store.widgetConfig[uuid].outterRadius + '%'],
    }
  })
  return options
}

export const useColorStyle = (uuid: string, store: any) => {
  const options = computed(() => {
    return {
      color: store.widgetConfig[uuid].colorList,
    }
  })
  return options
}

export const useUpdate = (watchList: any[], watchInstance: any, options: any) => {
  watch(watchList, (value) => {
    let optionsTmp = {
      ...options,
    }
    value.forEach(config => {
      if (config.seriesItem || config instanceof Array) {
        optionsTmp.series.forEach((seriesItem: any, index: number) => {
          optionsTmp.series[index] = {
            ...seriesItem,
            ...config.seriesItem ? config : (config[index] ? config[index] : {}),
          }
        })
        return
      }
      optionsTmp = {
        ...optionsTmp,
        ...config,
      }
    })
    console.log('options', optionsTmp)
    watchInstance.setOption(optionsTmp)
  }, {
    immediate: true,
  })
}